import React, {useEffect, useState} from 'react'
import {Button, Modal, Table} from 'antd'
import { connect } from 'umi'
import moment from 'moment';
import {bankcardTypeList} from '@/utils/constant';

const Details = (props) => {

  const { visible,onCancel,record} = props
  const [data, setData] = useState([])

  useEffect(() => {
    if(record){
      setData(record.userBankCardAnnalDtoList)
    }
  }, [record])

  const onFormCancel = () =>{
    onCancel()
  }

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '开户银行',
      hideInSearch: true,
      dataIndex: 'bankAccount',
      key:'bankAccount',
    },
    {
      title: '所属支行',
      hideInSearch: true,
      dataIndex: 'subBranch',
      key:'subBranch',
    },
    {
      title: '银行卡号',
      hideInSearch: true,
      dataIndex: 'bankcardNum',
      key:'bankcardNum',
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      render: (text) =>{
        const res = bankcardTypeList.find((item) => item.value === parseInt(text));
        return res ? res.label : text
      }
    },
    {
      title: '失效时间',
      dataIndex: 'invalidDate',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
  ]

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" onClick={() => onFormCancel()}>返回</Button>
      </>
    )
  }

  return (
    <Modal
      maskClosable={false}
      width={1080}
      title="银行卡修改记录"
      visible={visible}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
      />
    </Modal>
  )
}


export default connect(() => ({
}))(Details)
